<template>
	<div class="contents">
		<div class="dis disJuB mar-top20">
			<div />
			<div v-if="brandlist.length < brand_num">
				<el-button type="primary" @click="openaddbrand()">新增场馆</el-button>
			</div>
		</div>
		<div class="dis disAl" style="width: 670px;margin: 0px auto;border: 1px solid #ccc;padding: 20px;">
			<div class="dis disAl" style="flex-direction: column;">
				<img :src="avatar" style="width: 100px">
				<div style="font-size: 14px;margin-top: 5px">品牌LOGO</div>
			</div>
			<div class="mar-left20" style="display: flex;align-items: center">
				<el-upload action="#" :show-file-list="false" :http-request="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload" class="">
					<div class="que bacFFF"
						style="border: 1px solid #C9C9C9;background: #41c3a8;color:#fff;border: none">上传图片</div>
				</el-upload>
				<!--        <el-button type="primary">本地上传</el-button>-->
				<span style="font-size: 12px;color:#818181;margin-left: 10px">图片不超过2MB，支持JPG、JPEG、GIF、PNG格式的图片。</span>
			</div>
		</div>
		<!--    <div class="items" style="height: auto !important;">-->
		<!--      <div>微官网皮肤风格：风格一</div>-->
		<!--      <div />-->
		<!--    </div>-->
		<div class="items" style="height: auto !important;">
			<div>授权微信公众号（授权后可设置开启模版消息等）</div>
			<div>未授权</div>
		</div>
		<div class="tips2">
			由于微信公众后台规则，对于绑定了认证服务号的品牌，您需要满足以下条件才可以开启成功：<br>
			1. 公众号消息模版所属行业为：主营行业：IT科技 / 互联网|电子商务，副营行业：文体娱乐/体育<br>
			2.会员需关注您的公众号，并开启接收模板消息功能,才可以收到模板消息<br>
			[特别注意] 微信后台模版消息行业设置中有两个可选，为保证在简奕约课掌馆的使用体验更好，请确保两个行业都设置正确: “主营行业：IT科技/互联网|电子商务，副营行业：文体娱乐/体育”<br>
			根据微信规定，未开通的需要申请开通，微信会在1-2个工作日内审核，且对已经开通的，所在行业一个月只能修改一次，因此请谨慎修改，并考虑是否会对您公众号的其他运营带来影响。<br>
			您公众号所属行业分类为：IT科技/互联网|电子商务、IT科技/电子技术、文体娱乐/体育<br>
		</div>
		<div>
			<div v-for="(item,index) in brandlist" :key="index" style="width: 670px;margin: 0px auto;margin-top: 30px">
				<div class="dis disJuB disAl mar-bott5">
					<div>{{ item.name }}</div>
					<div>
						<el-button type="success" @click="editbrand(item)">编辑</el-button>
						<el-button type="info" @click="delbrand(item.id)">删除</el-button>
					</div>
				</div>
				<div class="dis disJuB disAl" style="background: #ededed;padding: 20px;font-size: 14px">
					<div style="">
						<div>电话：{{ item.mobile }}</div>
						<div class="mar-top10">地址：{{ item.province + item.city + item.district + item.address }}</div>
					</div>
					<div class="dis disAl" style="cufdsudafsufdsaujfads" @click="venueClick(item)">
						<div>
							<img src="../../../public/img/jinru.png" style="width: 20px">
						</div>
						<div class="mar-left10" style="cursor: pointer;">进入场馆</div>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 200px" />
		<div v-if="shuaVisible" class="zhezhao wh100" />
		<div v-if="shuaVisible" v-loading="loading" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 862px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">新增场馆</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="shuaVisibleClick()" />
					</div>
					<div class="" style="padding: 20px 0;">
						<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
							<div class="dis disAl disJuB" style="flex-wrap: wrap">
								<div class="dis disAl disJuB hei44 itFor ites" style="">
									<div>
										<span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
										<span class="foSi14">场馆名称</span>
									</div>
									<el-form-item class="mp0" prop="name">
										<el-input v-model.number="ruleForm.name" style="width: 230px"
											placeholder="请输入场馆名称1~20个字符内" class="mar0 kcTime" />
									</el-form-item>
								</div>
								<div class="dis disAl disJuB hei44 itFor ites">
									<div>
										<span class="foSi14" style="color: #ff0000;margin-right: 4px;" />
										<span style="font-size: 14px">联系电话</span>
									</div>
									<el-form-item class="mp0" prop="tel">
										<el-input v-model.number="ruleForm.tel" placeholder="请输入联系电话"
											class="mar0 kcTime" />
									</el-form-item>
								</div>
								<div class="dis disAl disJuB hei44 itFor ites">
									<div>
										<span class="foSi14" style="color: #ff0000;margin-right: 4px;">*</span>
										<span style="font-size: 14px">联系手机</span>
									</div>
									<el-form-item class="mp0" prop="mobile">
										<el-input v-model.number="ruleForm.mobile" placeholder="请输入联系手机"
											class="mar0 kcTime" />
									</el-form-item>
								</div>
								<div class="dis disAl disJuB hei44 itFor ites">
									<div>
										<span class="foSi14" style="color: #ff0000;margin-right: 4px;">*</span>
										<span style="font-size: 14px">联系人</span>
									</div>
									<el-form-item class="mp0" prop="username">
										<el-input v-model.number="ruleForm.username" placeholder="请输入联系人"
											class="mar0 kcTime" />
									</el-form-item>
								</div>
								<div class="dis disAl disJuB hei44 itFor ites">
									<div>
										<span class="foSi14" style="color: #ff0000;margin-right: 4px;">*</span>
										<span style="font-size: 14px">请选择所在地址</span>
									</div>
									<el-form-item class="mp0" prop="citys">
										<el-cascader v-model="ruleForm.citys" class="inp1" :options="cascaderList"
											:props="optionProps" @change="handleChange" />
									</el-form-item>
								</div>
								<div class="dis disAl disJuB hei44 itFor ites">
									<div>
										<span class="foSi14" style="color: #ff0000;margin-right: 4px;">*</span>
										<span style="font-size: 14px">详细地址</span>
									</div>
									<el-form-item class="mp0" prop="address">
										<el-input v-model.number="ruleForm.address" placeholder="请输入详细地址"
											class="mar0 kcTime" />
									</el-form-item>
								</div>
								<div class="dis disAl itFor ites" style="width: 100%">
									<div>
										<span style="font-size: 14px">场馆图片</span>
									</div>
									<div class="dis disAl" style="margin-left: 150px;cursor: pointer">
										<div calss="upImg bacFFF" style="display: flex;align-items: center">
											<el-upload action="#" :show-file-list="false"
												:http-request="handleAvatarSuccess1" :before-upload="beforeAvatarUpload"
												class="">
												<div class="que bacFFF"
													style="border: 1px solid #C9C9C9;background: #41c3a8;color:#fff;border: none">
													上传图片</div>
											</el-upload>
											<img v-if="ruleForm.cover_img" :src="ruleForm.cover_img" class="wh100"
												style="width: 170px;margin-left: 20px;height: 100px;">
										</div>
										<div style="margin-left: 30px;color: #b8b8b8;font-size: 14px">建议尺寸:690*240像素
										</div>
									</div>
								</div>
								<div class="dis itFor ites" style="width: 100%">
									<div>
										<span style="font-size: 14px">简介</span>
									</div>
									<el-form-item class="mp0" prop="brief" style="margin-left: 20px !important;">
										<el-input v-model.number="ruleForm.brief" type="textarea"
											style="width: 650px;margin-left: 20px" :rows="4" placeholder="请输入场馆介绍"
											class="mar0 kcTime" />
									</el-form-item>
								</div>
							</div>
						</el-form>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" style="background: #48a9f3;"
							@click.stop="submitForm('ruleForm')">保存</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		savebrand,
		getbrand,
		delbrand,
		editbrandhead
	} from '@/api/brand'
	import cascaderJSON from '@/views/member/components/cascaderList.json'
	import Cookies from 'js-cookie'
	import {
		uploadimg
	} from '@/api/utils'
	import {
		mapGetters
	} from 'vuex'

	export default {
		name: 'BrandManage',
		components: {},
		computed: {
			...mapGetters([
				'permission_routes',
				'avatar',
				'is_super',
				'brand_name',
				'redirect',
				'brand_num'
			]),
			getAvatar() {
				return this.$store.state.settings.avatar
			},
			getName() {
				return this.$store.state.settings.name
			}
		},
		data() {
			const telcheck = (rule, value, callback) => {
				var reg = new RegExp('^1[3-9]\\d{9}$')
				if (!reg.test(value)) {
					callback(new Error('请输入正确的电话号码'))
				} else {
					callback()
				}
			}
			return {
				loading: false,
				infos: {},
				brandlist: [],
				shuaVisible: false,
				ruleForm: {
					id: null,
					name: null,
					tel: null,
					mobile: null,
					username: null,
					citys: [],
					address: null,
					brief: null,
					cover_img: null
				},
				rules: {
					name: [{
						required: true,
						message: '请输入一到20个字符内',
						trigger: 'change'
					}],
					mobile: [{
						required: true,
						validator: telcheck,
						trigger: 'change'
					}],
					username: [{
						required: true,
						message: '请输入联系人',
						trigger: 'change'
					}],
					citys: [{
						required: true,
						message: '请选择地址',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'change'
					}]
				},
				cascaderList: cascaderJSON,
				optionProps: {
					value: 'value',
					label: 'value',
					children: 'children'
				},
				url: ''
			}
		},
		created() {
			var that = this
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
					name: '品牌设置',
					url: '/brandManage',
					pd: true
				}]
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})

			try {
				that.permission_routes.forEach(item1 => {
					const tmp1 = {
						...item1
					}
					if (!tmp1.hidden) {
						try {
							tmp1.children.forEach(item2 => {
								const tmp2 = {
									...item2
								}
								if (!tmp2.hidden) {
									that.url = tmp1.path === '/' ? tmp1.path + tmp2.path : tmp1.path +
										'/' + tmp2.path
									throw new Error() // 抛出异常
								}
							})
						} finally {}
					}
				})
			} catch (e) {}
			this.getbrandlist()
		},
		methods: {
			venueClick(item) {
				var value = {
					name: item.name,
					id: item.id
				}
				localStorage.setItem('cg', 0)
				localStorage.setItem('venue', JSON.stringify(value))
				this.$router.replace({
					path: this.url
				})
			},

			handleAvatarSuccess(file) {
				const mf = new FormData()
				mf.append('file', file.file)
				uploadimg(mf).then(response => {
					const {
						data
					} = response
					this.$store.dispatch('user/changeXuan', {
						key: 'avatar',
						value: data
					})
					const params = {
						logo: data
					}
					editbrandhead(params).then(response => {
						const {
							data
						} = response
						console.log(data)
					}).catch(error => {
						console.log(error)
						this.loading = false
					})
				})
			},
			handleAvatarSuccess1(file) {
				const mf = new FormData()
				mf.append('file', file.file)
				uploadimg(mf).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.ruleForm.cover_img = data
				})
			},
			handleTag() {
				const parseDom = this.parseDom(`<img src="${this.imageUrl}">`)
				// 在光标处插入dom
				this.range.insertNode(parseDom)
				// 光标开始和光标结束重叠
				this.range.collapse(true)
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG或PNG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			},
			handleChange(e) {
				this.ruleForm.citys = e
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loading = true
						const data = this.ruleForm
						data.province = data.citys[0]
						data.city = data.citys[1]
						data.district = data.citys[2]
						delete data.citys
						console.log(data)
						savebrand(data).then(response => {
							const {
								data
							} = response
							console.log(data)
							this.shuaVisible = false
							this.loading = false
							this.getbrandlist()
						}).catch(error => {
							console.log(error)
							this.loading = false
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},

			editbrand(item) {
				item.citys = [item.province, item.city, item.district]
				Object.keys(this.ruleForm).forEach((key) => {
					if (item[key] !== undefined) this.ruleForm[key] = item[key]
				})
				this.shuaVisible = true
				console.log(item)
			},
			/* 删除场馆 */
			delbrand(id) {
				const that = this
				this.$confirm('删除场馆该场馆下会员将无法消费, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delbrand(data).then(response => {
						const {
							data
						} = response
						console.log(data)
						this.loading = false
						this.getbrandlist()
						that.$message({
							type: 'success',
							message: '操作成功!'
						})
					}).catch(error => {
						console.log(error)
						this.loading = false
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
				const data = {
					id: id
				}
			},
			openaddbrand() {
				console.log('啥活啊')
				this.ruleForm = {
					id: null,
					name: null,
					tel: null,
					mobile: null,
					username: null,
					citys: [],
					address: null,
					brief: null,
					cover_img: null
				}
				this.shuaVisible = true
			},
			shuaVisibleClick() {
				this.shuaVisible = false
			},
			getbrandlist() {
				console.log('获取场馆列表')
				getbrand({}).then(response => {
					const {
						data
					} = response
					this.brandlist = data
					console.log(data)
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contents {
		width: 1200px;
		margin: 0px auto;
		//border: 1px solid #ccc;
	}

	.items {
		background: #f6f6f6;
		padding: 20px 15px;
		display: flex;
		width: 670px;
		margin: 0px auto;
		margin-top: 10px;
		justify-content: space-between;
		align-items: center;
	}

	.tips2 {
		width: 670px;
		margin: 0px auto;
		margin-top: 10px;
		font-size: 12px;
		color: #f49352;
		line-height: 24px;
	}

	.ites {
		background: #f2f2f2;
		padding: 10px;
		width: 49%;
		margin-bottom: 10px
	}

	.upimg {
		width: 150px;
		height: 80px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
	}

	.upImg {
		width: 148px;
		height: 84px;
		overflow: hidden;
	}

	.goods-img__add-inner {
		display: inline-block;
		padding-left: 20px;
		background: url('../../icons/png/icon-add-s.png') no-repeat left 3px center;
	}

	.upImg1 ::v-deep .el-upload {
		width: 148px;
		height: 84px;
		line-height: 84px;
		border: 1px solid #d9d9d9;
		color: #41c3a8 !important;
		font-size: 12px;
	}
</style>
